<template>
	<div class="container">
		<Form  :model="form" :rules="rule" :label-width="40">
			<Row>
				<Col span="6">
					<FormItem label="主题">
						<Select>
							<Option value="beijing">--选择主题--</Option>
							<Option value="shanghai">主题一</Option>
							<Option value="shenzhen">主题二</Option>
						</Select>
					</FormItem>
				</Col>
				<Col span="18">
					<FormItem label="名称">
						<Input v-model="form.input" placeholder="Enter something..."></Input>
					</FormItem>
				</Col>
			</Row>
			<Row class="editor">
				<Col>
					<div ref="editorElem"></div>
				</Col>
			</Row>
			<Row>
				<Col>
					<FormItem>
						<Button type="primary" style="margin-top:10px"  >提交</Button>
						<Button style="margin-top: 10px;margin-left: 10px" @click="$router.push('/plate')">返回板块</Button>
					</FormItem>
				</Col>
			</Row>
		</Form>
	</div>
</template>

<script>
	import E from "wangeditor";
	import {mapActions, mapGetters} from "vuex";

	export default {
		name: "NewPage",
		data() {
			return {
				form: {

				},
				rule:{

				},

			}
		},

		mounted: function() {
			this.editor = new E(this.$refs.editorElem);
			this.editor.customConfig.onchange = html => {
				// this.editorContent = html;
				// this.catchData(this.editorContent); // 把这个html通过catchData的方法传入父组件
			};
			this.editor.customConfig.menus = [
				// 菜单配置
				"head", // 标题
				"bold", // 粗体
				"fontSize", // 字号
				"fontName", // 字体
				"italic", // 斜体
				"underline", // 下划线
				"strikeThrough", // 删除线
				"foreColor", // 文字颜色
				"backColor", // 背景颜色
				"link", // 插入链接
				"list", // 列表
				"justify", // 对齐方式
				"quote", // 引用
				"emoticon", // 表情
				"image", // 插入图片
				"table", // 表格
				"code", // 插入代码
				"undo", // 撤销
				"redo" // 重复
			];
			this.editor.create(); // 创建富文本实例
		}
	};
</script>

<style scoped>
	.editor {
		z-index: 0;
	}
</style>